﻿@charset "UTF-8";
@import "base.css";

@font-face {font-family:'noto-thin';font-weight:400;src:url("font/NotoSansCJKsc-Thin.eot");src:url("font/NotoSansCJKsc-Thin.eot?#iefix") format("embedded-opentype"),url("font/NotoSansCJKsc-Thin.woff") format("woff"),url("font/NotoSansCJKsc-Thin.ttf") format("truetype"),url("font/NotoSansCJKsc-Thin.svg#NotoSansCJKsc-Thin") format("svg")}
@font-face {font-family:'noto-light';font-weight:400;src:url("font/NotoSansCJKsc-Light.eot");src:url("font/NotoSansCJKsc-Light.eot?#iefix") format("embedded-opentype"),url("font/NotoSansCJKsc-Light.woff") format("woff"),url("font/NotoSansCJKsc-Light.ttf") format("truetype"),url("font/NotoSansCJKsc-Light.svg#NotoSansCJKsc-Light") format("svg")}
@font-face {font-family:'iconfont';src:url("font/iconfont.eot");src:url("font/iconfont.eot?#iefix") format("embedded-opentype"),url("font/iconfont.woff") format("woff"),url("font/iconfont.ttf") format("truetype"),url("font/iconfont.svg#iconfont") format("svg")}

/* loading =========================================================================================== */
#loading{
  	background: radial-gradient(#00003f, #00036b, #00003e); /* 标准的语法 */
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 999;
	margin-top: 0px;
	top: 0px;
}
#loading-center{ width: 100%; height: 100%; position: relative; }
#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 200px;
	width: 200px;
	margin-top: -100px;
	margin-left: -100px;
	-ms-transform: rotate(-135deg); 
   	-webkit-transform: rotate(-135deg); 
    transform: rotate(-135deg);

}
.object{
	-moz-border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
	border-radius: 50% 50% 50% 50%;
	position: absolute;
	border-top: 5px solid #FFF;
	border-bottom: 5px solid transparent;
	border-left:  5px solid #FFF;
	border-right: 5px solid transparent;
	-webkit-animation: animate 2s infinite;
	animation: animate 2s infinite;	
}
#object_one{ width:50px; height:50px; top:75px; left:75px; }
#object_two{ width:70px; height:70px; top:65px; left:65px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
#object_three{ width:90px; height:90px; top:55px; left:55px; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
#object_four{ width:110px; height:110px; top:45px; left:45px; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }

@-webkit-keyframes animate {
	50% {
		-ms-transform: rotate(360deg) scale(0.8); 
	   	-webkit-transform: rotate(360deg) scale(0.8); 
	    transform: rotate(360deg) scale(0.8); 
	}
}
@keyframes animate {
	50% {
		-ms-transform: rotate(360deg) scale(0.8); 
		-webkit-transform: rotate(360deg) scale(0.8); 
		transform: rotate(360deg) scale(0.8); 
	}
}
/* loading =========================================================================================== */

/* common =========================================================================================== */
.contextmenu{ padding:2px; width:120px; background:#f1f1f1 url('../images/contextmenu-bg.png') repeat-y left; border:1px solid #979797; box-shadow: 2px 2px 2px #888; position:absolute; z-index:99; }
.contextmenu .item .link{ display:block; padding-left:30px; }
.contextmenu .item .link:hover{ background:#ccc; }

.maskDiv{ display:nones; background:#000; opacity:0.6; width:100%; height:100%; position:absolute; z-index:6; top:0; left:0; }

.customWindow{ width:90%; height:80%; background:#20529e;
	border:6px solid #083c8b; box-shadow:5px 5px 10px #000;
	position:fixed; left:5%; top:10%; z-index:9; }
.customWindow .wd-close{ display:none; width:50px; height:50px; background:#f00; border:6px solid #083c8b; border-radius:50%;
	text-align:center; line-height:42px; font-size:50px; font-weight:bold; color:#fff;
	position:absolute; top:-25px; right:-25px; cursor:pointer; }
.customWindow .wd-cont{ width:100%; height:100%; }
@keyframes customWindowOn{
	from { width:0%; height:0%; left:50%; top:50%; }
	to { width:90%; height:80%; left:5%; top:10%; }
}
.customWindowOn.customWindowOn{ animation: customWindowOn .5s; }
/* common end =========================================================================================== */

.wrap{}
.wrap-title{ padding:.8rem; font-size:18px; text-align:center; }
.wrap-title h1{ font-size:1.6rem; }
.wrap-cont{ overflow:hidden; }
.wrap .item-chart{ }
.wrap .item-chart .chart-wrap{ padding:10px; margin:10px; height:280px; background:#f9f9f9; border:1px solid #ccc; border-radius:6px;}
.wrap .item-chart .chartDiv{ height:100%; }
.wrap .col2{ float:left; width:50%; }
.wrap .col3{ float:left; width:33.33%; }


.layout1{ background:url(../images/body_bg.jpg) top; background-size:100%; }
.layout1 .wrap .wrap-title{ margin:0 10px; padding:0; height:66px; line-height:60px; position:relative; }
.layout1 .wrap-title .tc { margin:0 100px; height:100%; background:url(../images/bg_title.png) no-repeat center; text-align:center; color:#63b1e9; font-size:24px; }
.layout1 .wrap-title .tbg{ width:100px; height:100%; position:absolute; top:0; }
.layout1 .wrap-title .tbg.l{ left:0; background: url(../images/bg_title_l.png) no-repeat center; }
.layout1 .wrap-title .tbg.r{ right:0; background: url(../images/bg_title_r.png) no-repeat center; }
.layout1 .chartLegend{ position:absolute; top:38px; left:12px; color:#63b1e9; }
.layout1 .chartLegend li{ float:left; margin-right:15px; }
.layout1 .chartLegend li *{ float:left; }
.layout1 .chartLegend li i{ display:block; margin:2px 0 0 5px; width:80px; height:17px; background:#ccc; }
.layout1 .chartLegend .l1 i{ background:rgba(213,37,37,0.7); }
.layout1 .chartLegend .l2 i{ background:rgba(154,213,37,0.7); }
.layout1 .updateTime{ position:absolute; top:38px; right:12px; color:#63b1e9; font-size:12px; }
.layout1 .wrap .item-chart .chart-wrap{ background:transparent; border:1px solid rgb(175, 250, 255, .5); position:relative; }
.layout1 .wrap .item-chart .chart-wrap .chartBg{ width:100%; height:100%; background:rgb(82, 200, 200, .1); position:absolute; top:0; left:0; }

.fullBody{ margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden; }
.themeBlue{ background: radial-gradient(#00003f, #00036b, #00003e); }
.themeBlue .mini-grid-header, .themeBlue .mini-grid-column-trigger, .themeBlue .mini-grid-headerCell, .themeBlue .mini-grid-topRightCell, .themeBlue .mini-grid-columnproxy {
    border-color: #0000bc;
    background: #070787;
    color: #fff;
}
.themeBlue .mini-panel-viewport.mini-grid-viewport,
.themeBlue .mini-panel-border.mini-grid-border,
.themeBlue .mini-grid-pager, .themeBlue .mini-pager,
.themeBlue .mini-buttonedit-border.mini-corner-all{ background:transparent; border-color:#000098; }
.themeBlue .mini-pager, .themeBlue .mini-icon,
.themeBlue .mini-pager .mini-buttonedit-input{ color:#fff; }
.themeBlue a:hover.mini-button{ padding:0px; background:transparent; border:1px solid #A9ACB5; }
.themeBlue a.mini-button-disabled, .themeBlue a:hover.mini-button-disabled {
    border:1px solid #ccc;
    padding:0px;
    color:#777;
    background:transparent;      
    cursor:default;
}